<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>todolist</title>
	<script src="jquery.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		input:focus,button:focus,textarea:focus{
			outline-width:0; 
		}
		li{list-style: none;}
		body{
			font-size: 14px;
			color: #333;
			background-color: #cdcdcd;
		}
		a{
			color: #333;
			text-decoration: none;
		}
		.logo{
			font-size: 26px;
			font-family: Arial;
			float: left;
			color: #ddd;
			line-height: 50px;
		}
		.wrap{
			width: 600px;
			margin: 0 auto;
		}
		.addItem{
			float: right;
			width: 300px;
			height: 24px;
			margin-top: 12px;
			text-indent: 10px;
			border-radius: 5px;
			box-shadow: 0 1px 6px rgba(0,0,0,0.45) inset;
			border: none;
		}
		.addItem:focus{
			outline-width:0; 
		}
		.header{
			height: 50px;
			background-color: #333;
			margin-bottom: 20px;
		}
		.list{
			margin-top: 10px;
		}
		.list li{
			background-color: #fff;
			padding-left: 10px;
			margin-bottom: 5px;
			line-height: 32px;
			border-left: 5px solid #629A9C;
			border-radius: 5px;
			position: relative;
		}
		#done{
			opacity: 0.5;
		}
		.list p{
			position: absolute;
			top: 4px;
			right: 5px;
			display: inline-block;
			width: 14px;
			height: 12px;
			border-radius: 14px;
			border: 6px double #fff;
			background:#CCC;
			line-height: 8px;
			text-align: center;
			color: #fff;
			font-weight: bold;
			font-size: 14px;
			cursor: pointer;
		}
		.count{
			float: right;
			font-size: 14px;
			border-radius: 50%;
			padding: 5px;
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			var input=$("#addItem");
			var list=[];

			function renderList(){
				//清空所有数据
				var done =$("#done")
				var doing =$("#doing")
				done.empty();
				doing.html("");
				var count=0;//记录完成事项的个数
				//根据list变量在页面中生成对应节点
				list.forEach(function(item,index){
					var newli=$("<li><input type='checkbox'><span></span><p>-</p></li>");
					newli.find("span").html(item.text);
					newli.attr("index",index);
					if(item.status){
						count++;
						newli.appendTo(done);
						newli.find("input").prop("checked",true);
					}
					else{
						newli.appendTo(doing)	
					}
					newli.find("input").change(function(){
						var index =$(this).closest("li").attr("index");
						list[index].status = !list[index].status;
						renderList();
					})
					newli.find("p").click(function(){
						var index =$(this).closest("li").attr("index");
						list.splice(index,1)
						renderList();
					})
				})
				$("#doneCount").html(count);
				$("#doingCount").html(list.length-count);
				//本地存储
				localStorage.setItem("list",JSON.stringify(list))
			}

			$(function(){
				//历史记录插入到页面
				var historyData=localStorage.getItem("list");
					if(historyData){
						list=JSON.parse(historyData)
						renderList();
					}

				var input=$("#addItem");
				input.keypress(function(e){
					if(e.keyCode==13){
						var obj={}
						obj.text=$(this).val();
						obj.status = false;
						list.push(obj)
						renderList();
						this.value="";
					}
				})
			})
		})
	</script>
</head>
<body>
	<div class="header">
		<div class="wrap">
			<span class="logo">ToDoList</span>
			<input type="text" id="addItem" class="addItem" placeholder="添加待办事项">
		</div>
	</div>
	<div class="wrap"> 
		<h2>正在进行<span id="doingCount" class="count">0</span></h2>
		<ul id="doing" class="list">
		</ul>
		<h2>已经完成<span id="doneCount" class="count">0</span></h2>
		<ul id="done" class="list"></ul>
	</div>
</body>
</html>